<template>
  <div class="stat-ctn">
    <ul class="clearfix">
      <li class="stat-item item1">
        <div class="stat-item-icon">
          <a href="/cloud">
            <p class="img"><i class="iconfont" /></p>
            <p class="num"><b>11157</b>期次</p>
            <p class="num text">智能实验室</p>
          </a>
        </div>
        <div class="stat-item-course">
          <a class="course-item item1" href="/cloud?type=4"><i class="iconfont icon"></i>虚拟仿真实验课</a>
          <a class="course-item item2" href="/cloud?type=1"><i class="iconfont icon"></i>线上实验课</a>
          <a class="course-item item3" href="/cloud?type=2"><i class="iconfont icon"></i>混合式实验课</a>
        </div>
        <div class="stat-item-link">
          <a class="link-item item1" href="/course/build/help">开课指南</a>
          <a class="link-item item2" href="/cloud#hot">热门课程</a>
          <a class="link-item item3" href="/digital/publishing">数字出版</a>
        </div>
      </li>
      <li class="stat-item item2">
        <div class="stat-item-icon">
          <a href="/list">
            <p class="img"><i class="iconfont"></i></p>
            <p class="num"><b>3471</b>个</p>
            <p class="num text">实验中心</p></a>
        </div>
        <div class="stat-item-subject clearfix">
          <a class="subject-item item1" href="/list?sid=1">机械类</a>
          <a class="subject-item item2" href="/list?sid=80">化学类</a>
          <a class="subject-item item3" href="/list?sid=697">经济类</a>
          <a class="subject-item item4" href="/list?sid=579">材料类</a>
          <a class="subject-item item5" href="/list?sid=7">药学类</a>
          <a class="subject-item item6" href="/list?sid=95">文学类</a>
          <a class="subject-item item7" href="/list?sid=83">土木类</a>
          <a class="subject-item item8" href="/list?sid=89">植物类</a>
          <a class="subject-item item9" href="/list?sid=232">管理类</a>
          <a class="subject-item item10" href="/list?sid=222">电气类</a>
          <a class="subject-item item11" href="/list?sid=90">动物类</a>
          <a class="subject-item item12" href="/list">更多<i class="iconfont"></i></a>
        </div>
        <div class="stat-item-link">
          <a class="link-item item1" href="javascript:">专业在线实验室</a>
          <a class="link-item item2" href="javascript:">土木类在线实验室</a>
          <a class="link-item item3" href="javascript:">分子计算在线实验室</a>
        </div>
      </li>
      <li class="stat-item item3">
        <div class="stat-item-icon">
          <p class="img"><i class="iconfont"></i></p>
          <p class="num"><b>1600</b>万+人次</p>
          <p class="num text">应用评价</p>
        </div>
        <div class="stat-item-link">
          <a class="link-item item1" href="/monitor?s=1">人气指数</a>
          <a class="link-item item2" href="/monitor?s=2">共享指数</a>
          <a class="link-item item3" href="/monitor?s=3">互动指数</a>
          <a class="link-item item4" href="/monitor?s=4">吸引指数</a>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
</script>
<style lang="scss" scoped>
/*stat ctn start*/
.stat-ctn {
  width: 1200px;
  margin: 20px auto 35px;
}

.stat-item {
  float: left;
  background: rgba(220, 233, 255, 0.3);
  border: 1px solid rgba(182, 203, 254, 0.3);
  box-sizing: border-box;
  border-radius: 10px;
  width: 416px;
  height: 120px;
}

.stat-item.item2 {
  width: 500px;
  margin-left: 20px;
}

.stat-item.item3 {
  width: 244px;
  margin-left: 20px;
}

.stat-item-icon {
  display: inline-block;
  margin-right: 30px;
  vertical-align: top;
  text-align: center;
  margin-left: 20px;
}

.stat-item-icon .num {
  color: #4269c9;
  font-size: 14px;
}

.stat-item-icon .num b {
  font-size: 19px;
  letter-spacing: 2px;
  font-family: impact;
  font-weight: normal;
}

.stat-item-icon .num.text {
  color: #333;
}

.stat-item-icon .img {
  margin: 16px 0 5px;
}

.stat-item-icon .iconfont {
  color: #4269c9;
  font-size: 36px;
  /*background: linear-gradient(0, #659af4 30%, #2b75f5 80%);*/
  /*background-clip: text;*/
  /*-webkit-background-clip: text;*/
  /*color:transparent;*/
  /*-webkit-text-fill-color: transparent;*/
}

.stat-item-course {
  display: inline-block;
  margin-right: 34px;
}

.stat-item-course .icon {
  display: inline-block;
  margin-right: 8px;
  font-size: 16px;
  color: #4269c9;
  width: 16px;
}

.stat-item-course .item1 .icon {
  font-size: 13px;
}

.stat-item-link {
  display: inline-block;
  text-align: center;
  vertical-align: top;
  position: relative;
}

.item1 .stat-item-link, .item2 .stat-item-link, .item3 .stat-item-link {
  padding-left: 30px;
}

.item3 .stat-item-icon {
  margin-right: 24px;
}

.item1 .stat-item-link {
  padding-left: 38px;
}

.item2 .stat-item-link {
  padding-left: 20px;
}

.item3 .stat-item-link {
  padding-left: 24px;
}

.stat-item-course .course-item {
  display: block;
  color: #333;
  font-size: 16px;
  margin-top: 5px;
}

.stat-item-course .course-item.item1 {
  margin-top: 20px;
}

.link-item {
  text-align: center;
  display: block;
  color: #3e66c7;
  margin-top: 14px;
  font-size: 12px;
}

.stat-item-link:before {
  content:"";
  width: 1px;
  height: 76px;
  background: rgba(61, 132, 255, 0.2);
  position: absolute;
  left: 0;
  top: 20px;
}

.link-item.item1 {
  margin-top: 19px;
}

.item3 .stat-item-link img {
  position: absolute;
  left: 20px;
  top: 28px;
}

.item3 .link-item {
  margin-top: 7px;
}

.item3 .link-item.item1 {
  margin-top: 14px;
}

.stat-item-subject {
  display: inline-block;
  width: 208px;
  margin-right: 30px;
  margin-top: 12px;
}

.stat-item-subject .subject-item {
  float: left;
  margin-right: 28px;
  margin-bottom: 2px;
  color: #333;
  font-size: 16px;
}

.stat-item-subject .subject-item.item3, .stat-item-subject .subject-item.item6, .stat-item-subject .subject-item.item9, .stat-item-subject .subject-item.item12 {
  margin-right: 0;
}

.stat-item-subject .subject-item.item12 {
  color: #4269c9;
}

.stat-item-subject .subject-item.item12 .iconfont {
  font-size: 14px;
  margin-left: 3px;
}
/*stat-ctn end*/
.list-ctn {
  /*background-color: #fff;*/
  min-height: 500px;
  position: relative;
  overflow: hidden;
}

.list-ctn .container {
  padding: 0 0 60px;
  width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.high-light {
  margin: -400px 0 0 -780px;
  position: absolute;
  left: 50%;
  top: 0;
}
</style>
